<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    title="添加发送部门"
    width="400px"
    @close="$emit('closeUser', selection)"
  >
    <div>
      <el-input v-model="filterText" clearable placeholder="输入关键字进行过滤" size="small"></el-input>
      <el-tree
        ref="tree"
        :data="treeData"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :highlight-current="true"
        :props="{
          label: 'deptName',
          value: 'id',
          children: 'children',
        }"
        check-on-click-node
        class="mt-3"
        node-key="id"
        show-checkbox
        @node-click="nodeClick"
      >
      </el-tree>
    </div>
    <div slot="footer">
      <el-button icon="el-icon-check" size="small" type="primary" @click="handleConfig"> 确 定 </el-button>
      <el-button icon="el-icon-close" size="small" @click="$emit('closeUser', false)">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { requestDepartmentTreePage } from '@/api/organization'

export default {
  name: 'UserDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    deptData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentNodeData: {},
      filterText: '',
      treeData: [],
      selection: [],
    }
  },
  computed: {
    currentNodeKey() {
      if (!this.currentNodeData) {
        return 'root'
      }
      return this.currentNodeData.id
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    this.loadTreeData()
  },
  methods: {
    getRowKey(row) {
      return row.id
    },
    filterNode(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    async loadTreeData() {
      // this.treeData = await this.loadDepartmentTree()
      this.$nextTick(() => {
        console.log(this.deptData)
        this.$refs.tree && this.$refs.tree.setCheckedKeys(this.deptData.map((item) => item.deptId))
      })
    },
    async loadDepartmentTree() {
      let ret = []
      try {
        const { success, data } = await requestDepartmentTreePage({})
        if (success) {
          ret = data
        }
      } catch (error) {}
      return ret
    },
    nodeClick(data) {
      // this.currentNodeData = data
      // this.searchForm.deptId = data.id
    },
    handleConfig() {
      const selection = this.$refs.tree.getCheckedNodes(true)
      this.$emit(
        'closeUser',
        selection.map((item) => {
          return {
            ...item,
            deptId: item.id,
          }
        })
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.classify-wrap,
.crud-wrap,
.selected-wrap {
  max-height: 60vh;
  overflow-y: auto;
}

.classify-wrap {
  padding: 0 5px;
  min-width: 220px;
  overflow: auto;

  .classify-tree {
    display: inline-block;
    min-width: 100%;
  }
}

.crud-wrap {
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #f1f1f1;
  border-left: 1px solid #f1f1f1;
}

.selected-wrap {
  flex: 0;
  padding: 0 10px;
  min-width: 220px;
  overflow-y: auto;

  .selected-item {
    height: 30px;

    .selected-item__label {
      max-width: 80%;
    }
  }
}
</style>
